<script lang="ts" setup>
import { onMounted, ref, type Ref } from "vue";
import Nav_bottom from "@/componets/nav/nav_bottom";
import { goPhoto } from "@/util/go";
import { getSimpleList, type Query, type SampleVO } from "@/api/simple"
import { baseUrl } from "@/api/http";
import { getSampleClassList, type sampleClassVO } from "@/api/simple/class"
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";

// 样片列表数据
interface Sample {
  id: number;
  name: string;
  description: string;
  imageUrl: string;
}

const query:Ref<Query> = ref({
	sampleClassId: 0,
	title: "",
	pageNum: 1,
	pageSize: 10
})

const sampleList = ref<SampleVO[]>([

]);

const sampleClassList = ref<sampleClassVO[]>([])

const isRefreshing = ref(false);
const hasMore = ref(true);

// 搜索
const handleSearch = () => {
	sampleList.value = []
	query.value.pageNum = 1
	getList()
};

//标签选择
const handleClickTag = (id:number) => {
	query.value.pageNum = 1
	query.value.sampleClassId = id
	sampleList.value = []
	getList()
}

// 查看详情
const goToDetail = (id: number) => {
	goPhoto(id + "")
};

// 下拉刷新
const refresh = () => {
  isRefreshing.value = true;
  setTimeout(() => {
    isRefreshing.value = false;
    uni.showToast({
      title: "刷新成功",
      icon: "success",
    });
  }, 1000);
};

// 加载更多
const loadMore = () => {
  if (!hasMore.value) return;

  setTimeout(() => {
    hasMore.value = false;
  }, 1000);
};

const getList = () => {
	getSimpleList(query.value).then(res => {
		let data = res.data.data.data.records as SampleVO[]
		sampleList.value.push(...data)
		query.value.pageNum++
	})
}

const init = () => {
	
	getSampleClassList().then(res => {
		sampleClassList.value = res.data.data.data
	})
	
	getList()
}

// 分享给朋友
  onShareAppMessage(() => ({
    title: '如初国风馆',
    path: '/pages/index/index', // 替换为你的页面路径
    imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))
  // 分享到朋友圈
  onShareTimeline(() => ({
  	  title: '如初国风馆',
  	  path: '/pages/index/index', // 替换为你的页面路径
  	  imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))

init()
</script>

<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <text class="title">样片列表</text>
    </view>
	
	<view class="filter">
		
		<view class="search-box">
		  <uni-icons type="search" size="20" color="#999999" />
		  <input type="text" placeholder="搜索" v-model="query.title" placeholder-class="placeholder" />
		  <button type="primary" @click="handleSearch"  size="mini">搜索</button>
		</view>
	
		<scroll-view scroll-x class="menu">
			
			<view class="menu_list">
				<view :class="query.sampleClassId == 0 ? 'menu_item menu_active' : 'menu_item'" @click="handleClickTag(0)">
					<text>全部</text>
				</view>
				<view :class="query.sampleClassId == i.id ? 'menu_item menu_active' : 'menu_item'" v-for="i in sampleClassList"
					@click="handleClickTag(i.id)"
				>
					<text>{{i.sampleClassName}}</text>
				</view>
			</view>
			
		</scroll-view>
		
	</view>

	

    <!-- 主体内容区 -->
    <scroll-view
      class="content"
      scroll-y
      @scrolltolower="loadMore"
      @refresherrefresh="refresh"
      refresher-enabled
      :refresher-triggered="isRefreshing"
    >
      <view v-if="sampleList.length > 0" class="grid">
        <view
          v-for="(item, index) in sampleList"
          :key="index"
          class="grid-item cursor-pointer"
          @click="goToDetail(item.id)"
        >
          <image class="sample-image" :src="baseUrl + item.frontCover" mode="aspectFill" />
          <text class="sample-name">{{ item.title }}</text>
          <text class="sample-desc">{{ item.apply }}</text>
        </view>
		
		
      </view>

      <!-- 空状态 -->
      <view v-else class="empty-state">
        <text class="empty-text">暂无相关样片</text>
      </view>

    </scroll-view>
	  <nav_bottom :index="3"></nav_bottom>
  </view>
</template>

<style scoped lang="scss">

.container {
	
	.filter {
		background-color: white;
		display: flex;
		flex-direction: column;
		.menu {
			.menu_list {
				display: flex;
				.menu_item {
					padding: 20rpx;
					white-space: nowrap;
				}
				
				.menu_active {
					color: #4caf50;
					border-bottom: #4caf50 1px solid;
				}
				
			}

			padding: 0 20rpx;
			width: 95vw;
		}
		.search-box {
		  display: flex;
		  align-items: center;
		  background-color: #f5f5f5;
		  padding: 16rpx 24rpx;
		  border-radius: 8rpx;
		  width: 90%;
		  margin: 0 auto;
		}
		.search-box input {
		  flex: 1;
		  margin-left: 16rpx;
		  font-size: 28rpx;
		}
		.placeholder {
		  color: #999999;
		}
	}
	
  .photo_input{
	input {
		width: 88%;
		height: 90%;
		background-color: white;
		border: 1px solid #e5e5e5;
		border-radius: 10px;
		padding-left: 10px;
	}
	padding: 20rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 40px;
	background-color: white;
  }
  padding-top: 90rpx;
  height: 90vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 32rpx;
}

.content {
  width: 95%;
  flex: 1;
  overflow: auto;
  padding: 24rpx;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.grid-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.sample-image {
  width: 100%;
  height: 400rpx;
}

.sample-name {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  margin: 16rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sample-desc {
  display: block;
  font-size: 24rpx;
  color: #666666;
  margin: 0 16rpx 16rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 32rpx;
}

.empty-image {
  width: 400rpx;
  height: 400rpx;
  margin-bottom: 32rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 32rpx;
}

.add-button {
  width: 240rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #007aff;
  color: #ffffff;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.loading {
  text-align: center;
  padding: 32rpx;
  color: #999999;
  font-size: 24rpx;
}

.cursor-pointer {
  cursor: pointer;
}
</style>
